<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/include :: header(~{::title}, ~{::link}, ~{::style})">
    <title>个人信息</title>
    <link th:href="@{/lib/bootstrap-fileinput/fileinput.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/lib/bootstrap-fileinput/theme.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/lib/bootstrap-fileinput/explorer-fas/theme.min.css}" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        #signatureparent {
            color:black;
            background-color:whitesmoke;
            max-width:600px;
            padding:20px;
        }
        /*This is the div within which the signature canvas is fitted*/
        #signature {
            border: 2px dotted black;
            background-color:lightgrey;
        }
        /* Drawing the 'gripper' for touch-enabled devices */
        html.touch #content {
            float:left;
            width:92%;
        }
        html.touch #scrollgrabber {
            float:right;
            width:4%;
            margin-right:2%;
            background-image:url()
        }
        html.borderradius #scrollgrabber {
            border-radius: 1em;
        }
    </style>
</head>
<body class="gray-bg">
<section class="section-content animated fadeInRight form-content">
    <div class="row">
        <div class="col-xs-3 pr5">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-gray dashboard-header gray-bg">
                    <h5>个人资料</h5>
                </div>
                <div class="ibox-content">
                    <form id="form-user-info">
                        <div class="text-center">
                            <p><img class="img-circle img-lg" name="avatar"></p>
                            <p><a href="javascript:avatar()">修改头像</a></p>
                        </div>
                        <ul class="list-group list-group-striped">
                            <li class="list-group-item"><i class="fa fa-user"></i>
                                <b class="font-noraml">登录名称：</b>
                                <p class="pull-right" name="loginName"></p>
                            </li>
                            <li class="list-group-item"><i class="fa fa-group"></i>
                                <b  class="font-noraml">所属部门：</b>
                                <p class="pull-right" name="deptName"></p>
                            </li>
                            <li class="list-group-item"><i class="fa fa-phone"></i>
                                <b class="font-noraml">手机号码：</b>
                                <p class="pull-right" name="mobile"></p>
                            </li>
                            <li class="list-group-item"><i class="fa fa-envelope-o"></i>
                                <b  class="font-noraml">邮箱地址：</b>
                                <p class="pull-right" name="email"></p>
                            </li>
                            <li class="list-group-item"><i class="fa fa-calendar"></i>
                                <b  class="font-noraml">出生日期时间：</b>
                                <p class="pull-right" name="birthday"></p>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-xs-9" style="padding-left: 0px">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-gray dashboard-header">
                    <h5>基本资料</h5>
                </div>
                <div class="ibox-content">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#user_basic" data-toggle="tab" aria-expanded="true">基本资料</a></li>
                            <li><a href="#modify_password" data-toggle="tab" aria-expanded="false">修改密码</a></li>
                            <li><a href="#modify_signature" data-toggle="tab" aria-expanded="false">我的签名</a></li>
                        </ul>
                        <div class="tab-content">
                            <!--用户信息-->
                            <div class="tab-pane active" id="user_basic">
                                <form class="form-horizontal" id="form-user-basic">
                                    <input name="userId" type="hidden">
                                    <input name="resumeId" type="hidden">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">用户名称：</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" name="userName" placeholder="请输入用户名称">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">手机号码：</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" name="mobile" placeholder="请输入手机号码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">邮箱：</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" name="email" placeholder="请输入邮箱">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">性别：</label>
                                        <div class="col-sm-10">
                                            <div style="width: 100%" class="input-group">
                                                <select class="form-control selectpicker m-b" name="sex" th:with="type=${@dict.getDataGroup('sys_user_sex')}">
                                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">出生日期：</label>
                                        <div class="col-sm-10 select-time">
                                            <input type="text" class="time-input form-control" id="birthday" placeholder="请选择" name="birthday" readonly/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="button" class="btn btn-sm btn-primary" onclick="generateResume()"><i class="fa fa-check"></i>生成简历</button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-primary" onclick="uploadResume()" data-toggle="modal" data-target="#uploadResumeModal" data-backdrop="static"><i class="fa fa-upload"></i>更新简历</button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-primary" onclick="printResume()"><i class="fa fa-print"></i>预览简历</button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-primary" onclick="downloadResume()"><i class="fa fa-download"></i>下载简历</button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-success form-submit" onclick="save()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-default" onclick="closeWin()"><i class="fa fa-reply-all"></i>关 闭 </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!--修改密码-->
                            <div class="tab-pane" id="modify_password">
                                <form class="form-horizontal" id="form-user-pass">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" th:utext="#{view.login_password}">密码：</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" name="oldPassword" th:placeholder="#{view.entry-password}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" th:utext="#{view.password.modify}">修改密码：</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" name="newPassword" id="newPassword" th:placeholder="#{view.password.modify}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" th:utext="#{view.repassword}">确认密码：</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" name="confirmPassword" th:placeholder="#{view.repassword}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="button" class="btn btn-sm btn-success form-submit" onclick="pass()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-default" onclick="closeWin()"><i class="fa fa-reply-all"></i>关 闭 </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!--我的签名-->
                            <div class="tab-pane" id="modify_signature">
                                <div id="signatureparent form-group">
                                    <div class="col-sm-12" style="height: 300px;" id="signature"></div>
                                    <div class="col-sm-12">
                                        <button type="button" class="btn btn-sm btn-success form-submit" onclick="saveSignature()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                                        <button type="button" class="btn btn-sm btn-success form-submit" onclick="unSignature()"><i class="fa fa-check"></i>清 空</button>&nbsp;
                                        <button type="button" class="btn btn-sm btn-default" onclick="closeWin()"><i class="fa fa-reply-all"></i>关 闭 </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal" id="uploadResumeModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only" th:utext="#{view.close}">关闭</span>
                    </button>
                    <h4>上传简历</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="file-loading">
                            <input id="resume-upload" name="file" type="file"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div th:replace="/common/include :: footer"></div>
<div th:replace="/common/include :: jSignatureJs"></div>
<div th:replace="/common/include :: fileinputJs"></div>

<script th:inline="javascript">
    var user_id = [[${id}]];
    var layer_index = [[${layer_index}]];
    var layer_callback = [[${layer_callback}]];
    var prefix = ctx + 'api/system/user';
    var user_avatar;

    var validator_field;
    var validator_option = {
        container: 'tooltip',
        feedbackIcons: {
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        live: 'enabled',
        excluded: [':disabled', ':hidden', ':not(:visible)', '.excluded'],
        submitButtons: '.form-submit'
    };

    var validator_basic;
    var validator_basic_fields = {
        userName: {
            validators: {
                notEmpty: {
                    message: [[#{view.not_empty}]]
                }
            }
        },
        email: {
            trigger: 'blur',
            validators: {
                notEmpty: {
                    message: [[#{view.not_empty}]]
                },
                emailAddress: {
                    message: [[#{view.email.invalid}]]
                },
                remote: {
                    url: ctx + 'public/user/unique',
                    data: function(validator) {
                        return {
                            userId: user_id,
                            email: $('input[name="email"]').val()
                        };
                    },
                    type: 'get',
                    threshold: 4,
                    message: [[#{view.email.exist}]]
                }
            }
        },
        mobile: {
            trigger: 'blur',
            validators: {
                regexp: {
                    regexp: '^((13[0-9])|(14[5,7,9])|(15([0-3]|[5-9]))|(166)|(17[0,1,3,5,6,7,8])|(18[0-9])|(19[8|9]))\\d{8}$',
                    message: [[#{view.mobile.invalid}]]
                },
                remote: {
                    url: ctx + 'public/user/unique',
                    data: function(validator) {
                        return {
                            userId: user_id,
                            mobile: $('input[name="mobile"]').val()
                        };
                    },
                    type: 'get',
                    threshold: 4,
                    message: [[#{view.mobile.exist}]]
                }
            }
        }
    };

    var validator_pass;
    var validator_pass_fields = {
        newPassword: {
            validators: {
                notEmpty: {
                    message: [[#{view.entry-password}]]
                },
                regexp: {
                    regexp: '^[a-zA-Z][a-zA-Z0-9!@#$~]{5,17}$',
                    message: [[#{view.password.rule}]]
                }
            }
        },
        confirmPassword: {
            trigger: 'blur',
            validators: {
                notEmpty: {
                    message: [[#{view.entry-password}]]
                },
                identical: {
                    field: 'newPassword',
                    message: [[#{view.repassword.inconformity}]]
                }
            }
        }
    };

    var signDiv;

    $(function () {
        // 生成表单基础验证信息
        $.operate.get({
            url: ctx + 'public/validator/option',
            async: false,
            data: {
                tableName: 'tb_sys_user'
            },
            success: function(result){
                if (result.code == 200 && $.common.isNotEmpty(result.param)) {
                    $.each(result.param, function (index, row) {
                        if (row.validators.regexp) {
                            var tmp = row.validators.regexp.regexp;
                            this.validators.regexp.regexp = new RegExp(tmp);
                            return true;
                        }
                    });

                    validator_field = result.param;
                }
            }
        });

        validator_field = $.common.isEmpty(validator_field) ? {} : validator_field;

        // 表单赋值
        $.operate.get({
            url: prefix + '/load',
            data: {
                'id': user_id
            },
            success: function(result) {
                if (result.code == 200) {
                    $.form.load('form-user-info', result.param, false, null, ctx + 'api/file/preview/');
                    $.form.load('form-user-basic', result.param);
                    // 加载日期组件
                    $.form.renderDate('birthday', result.param.birthday);
                    $('#userId').val(user_id);
                    user_avatar = result.param.avatar;
                    if ($.common.isEmpty(user_avatar)) {
                        $('#form-user-info').find('img').attr('src', ctx + 'image/avatar.png');
                    }
                    var option = {}, fields = validator_field;
                    $.extend(option, validator_option);
                    $.extend(fields, validator_basic_fields);
                    option.fields = fields;
                    $('#form-user-basic').bootstrapValidator(option);
                    $('#form-user-basic').data('bootstrapValidator').validate();

                    fields = validator_field;
                    $.extend(fields, validator_pass_fields);
                    option.fields = fields;
                    $('#form-user-pass').bootstrapValidator(option);
                    $('#form-user-pass').data('bootstrapValidator').validate();

                    // 签名项赋值
                    var dHeight = $('#signature').height()+ 'px';
                    var dWidth = parseInt($(document).width() * 0.65) + 'px';
                    signDiv = $('#signature').jSignature({
                        'UndoButton':false,
                        'height':dHeight,
                        'width':dWidth
                    });
                    if (result.param.signature) {
                        signDiv.jSignature('setData', result.param.signature);
                    }
                } else {
                    // 加载日期组件
                    $.form.renderDate('birthday');
                    $.modal.toast.error(result.msg, result.param);
                    setTimeout(function () {
                        window.location.href = ctx + result.code;
                    }, 1500);
                }
            },
            error: function(result) {
                window.location.href = ctx + 'error/500?errInfo=' + result;
            }
        });
    });

    function save() {
        validator_basic = $('#form-user-basic').data('bootstrapValidator');
        validator_basic.validate();
        if (validator_basic.isValid()) {
            // 加载参数数据
            var param = $.form.serialize('form-user-basic');
            $.operate.post({
                url: prefix + '/update',
                data: param,
                success: function (result) {
                    if (result.code == 200) {
                        $.modal.toast.success(result.msg);
                    } else {
                        $.modal.toast.error(result.msg, result.param);
                    }
                }
            });
        }
    }

    function pass() {
        validator_pass = $('#form-user-pass').data('bootstrapValidator');
        validator_pass.validate();
        if (validator_pass.isValid()) {
            // 加载参数数据
            var param = $.form.serialize('form-user-pass');
            $.operate.post({
                url: prefix + '/updatePwd/' + user_id,
                data: param,
                success: function (result) {
                    if (result.code == 200) {
                        $.modal.toast.success(result.msg);
                    } else {
                        $.modal.toast.error(result.msg, result.param);
                    }
                }
            });
        }
    }

    function saveSignature() {
        var datapair = signDiv.jSignature('getData', 'default');
        if (datapair) {
            var userId = $('#userId').val();
            var data = datapair;
            $.operate.post({
                url: prefix + '/update',
                data: {
                    userId: userId,
                    signature: data
                },
                success: function (result) {
                    if (result.code == 200) {
                        $.modal.toast.success(result.msg);
                    } else {
                        $.modal.toast.error(result.msg, result.param);
                    }
                }
            });
        }
    }

    function unSignature() {
        signDiv.jSignature('reset');
    }

    /*用户管理-头像*/
    function avatar() {
        var url = ctx + 'api/user/avatar?id=' + user_avatar;
        url += '&layer_index=' + window.name + '&layer_callback=updateAvatar';
        $.modal.lay.openFrame({
            content: url,
            title: '头像管理'
        });
    }

    function updateAvatar(fileId) {
        // 表单赋值
        $.operate.post({
            url: prefix + '/updateAvatar',
            data: {
                'userId': user_id,
                'fileId': fileId
            },
            success: function(result) {
                if (result.code == 200) {
                    $.modal.toast.success('更新头像成功');
                    user_avatar = result.param.avatar;
                    if ($.common.isNotEmpty(user_avatar)) {
                        $('#form-user-info').find('img').attr('src', ctx + 'api/file/preview/' + user_avatar);
                    } else {
                        $('#form-user-info').find('img').attr('src', ctx + 'image/user.png');
                    }
                } else {
                    $.modal.toast.error(result.msg, result.param);
                }
            },
            error: function(result) {
                window.location.href = ctx + '500?errInfo=' + result;
            }
        });
    }

    function generateResume() {
        window.location.href = prefix + '/generate/resume/' + user_id;
    }

    function uploadResume() {
        $('#resume-upload').off('fileuploaded');
        // 加载上传按钮组件
        $.fileInputPlug.init('resume-upload', null, {
            theme: 'fa',
            uploadUrl: prefix + '/update/resume',
            uploadExtraData: {
                'file_id': $('input[name="resumeId"]').val(),
                'path': 'resume',
                'user_id': user_id
            },
            initialPreviewAsData: false,
            minFileCount: 1,
            maxFileCount: 1,
            showDownload: false
        });
        $('#resume-upload').on('fileuploaded', function(event, data) {
            if (data.response.code == 200) {
                try {
                    $('input[name="resumeId"]').val(data.param);
                    $.modal.toast.success('上传成功');
                    $('#resume-upload').fileinput('destroy');
                } catch (e) {
                }
            } else {
                $.modal.toast.error(data.response.msg, data.response.param);
            }
            $('#resume-upload').fileinput('clear');
            $('#uploadResumeModal').modal('hide');
        });
    }

    function printResume() {
        var file_id = $('input[name="resumeId"]').val();
        if (file_id == null || file_id == undefined) {
            $.modal.toast.warning('提示', '请先更新简历！');
            return;
        }
        window.location.href = prefix + '/print/resume/'+ user_id;
    }

    function downloadResume() {
        var file_id = $('input[name="resumeId"]').val();
        if (file_id == null || file_id == undefined) {
            $.modal.toast.warning('提示', '请先更新简历！');
            return;
        }
        window.location.href = ctx + 'api/file/download/' + file_id;
    }

    function closeWin() {
        $.modal.lay.close();
    }
</script>
</body>
</html>
